<!DOCTYPE html>                                                                    
<html lang="en">                                                                  
                                                                                  
<head>                                                                            
    <meta charset="utf-8">                                                        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <meta http-equiv="X-UA-Compatible" content="ie=edge">                         
    <title>DeWeb - Upload </title>                                                    
</head>                                                                           

<body style="background-color:#F0F0F0">
    <script src="dist/vue.js" type="text/javascript"></script>          
    <script src="dist/index.js" type="text/javascript"></script>        
    <script src="dist/axios.min.js" type="text/javascript"></script>    
    <link rel="icon" href="dist/webimages/TForm1.ico" type="image/x-icon">       
    <link rel="stylesheet" type="text/css" href="dist/theme-chalk/index.css" /> 

    <div id="app" style="position:absolute;overflow-x:hidden;overflow-y:auto;left:0;right:0;bottom:0;margin: 0 auto;background-color:#FFFFFF" :style="{top:Form1_4__top,width:Form1_4__wid,height:Form1_4__hei}" >
        <el-dialog :title="input_query_caption" :visible.sync="input_query_visible" >
        	<el-form style="width:90%;padding-left:5%;">
        		<el-form-item :label="input_query_inputname" >
        			<el-input v-model="input_query_inputdefault" autocomplete="off"></el-input>
        		</el-form-item>
        	</el-form>
        	<div slot="footer" class="dialog-footer">
        		<el-button @click="input_query_visible=false">{{input_query_cancelcaption}}</el-button>
        		<el-button type="primary" @click="processinputquery">{{input_query_okcaption}}</el-button>
        	</div>
        </el-dialog>
		<iframe id="id_iframe" name="upload_iframe" style="display:none;"></iframe>
        <el-button size=medium v-if="Button1__vis" :disabled="Button1__dis" type="success" :type="Button1__typ" :style="{left:Button1__lef,top:Button1__top,width:Button1__wid,height:Button1__hei}" style="position:absolute;" @click.native="dwevent($event,'Button1','0','onclick','')">{{Button1__cap}}
        </el-button>
        <form id="BitBtn1__frm" v-if="BitBtn1__vis" :disabled="BitBtn1__dis" :style="{left:BitBtn1__lef,top:BitBtn1__top,width:BitBtn1__wid,height:BitBtn1__hei}" style="position:absolute;" action="/dwupload" method="POST" enctype="multipart/form-data" target="upload_iframe">
        <input id="BitBtn1__inp" type="FILE" name="file" style="display:none" @change=dwInputChange('BitBtn1');>
        <el-button id="BitBtn1__btn" size=medium v-if="BitBtn1__vis" :disabled="BitBtn1__dis" :type="BitBtn1__typ" style="width:100%;height:100%;" @click="dwInputClick('BitBtn1__inp');">{{BitBtn1__cap}}
        </el-button>
        </form>
        <form id="BitBtn2__frm" v-if="BitBtn2__vis" :disabled="BitBtn2__dis" :style="{left:BitBtn2__lef,top:BitBtn2__top,width:BitBtn2__wid,height:BitBtn2__hei}" style="position:absolute;" action="/dwupload" method="POST" enctype="multipart/form-data" target="upload_iframe">
        <input id="BitBtn2__inp" type="FILE" name="file" style="display:none" accept="image/*" @change=dwInputChange('BitBtn2');>
        <el-button id="BitBtn2__btn" size=medium v-if="BitBtn2__vis" :disabled="BitBtn2__dis" :type="BitBtn2__typ" style="width:100%;height:100%;" @click="dwInputClick('BitBtn2__inp');">{{BitBtn2__cap}}
        </el-button>
        </form>
        <el-button size=medium v-if="Button2__vis" :disabled="Button2__dis" type="success" :type="Button2__typ" :style="{left:Button2__lef,top:Button2__top,width:Button2__wid,height:Button2__hei}" style="position:absolute;" @click.native="dwevent($event,'Button2','0','onclick','')">{{Button2__cap}}
        </el-button>
        <form id="BitBtn3__frm" v-if="BitBtn3__vis" :disabled="BitBtn3__dis" :style="{left:BitBtn3__lef,top:BitBtn3__top,width:BitBtn3__wid,height:BitBtn3__hei}" style="position:absolute;" action="/dwupload" method="POST" enctype="multipart/form-data" target="upload_iframe">
        <input id="BitBtn3__inp" type="FILE" name="file" style="display:none" accept="video/*" capture="camera" @change=dwInputChange('BitBtn3');>
        <el-button id="BitBtn3__btn" size=medium v-if="BitBtn3__vis" :disabled="BitBtn3__dis" :type="BitBtn3__typ" style="width:100%;height:100%;" @click="dwInputClick('BitBtn3__inp');">{{BitBtn3__cap}}
        </el-button>
        </form>
        <el-button size=medium v-if="Button3__vis" :disabled="Button3__dis" type="success" :type="Button3__typ" :style="{left:Button3__lef,top:Button3__top,width:Button3__wid,height:Button3__hei}" style="position:absolute;" @click.native="dwevent($event,'Button3','0','onclick','')">{{Button3__cap}}
        </el-button>
        <el-main v-if="Panel_01_Tile__vis" :disabled="Panel_01_Tile__dis" :style="{backgroundColor:Panel_01_Tile__col,left:Panel_01_Tile__lef,top:Panel_01_Tile__top,width:Panel_01_Tile__wid,height:Panel_01_Tile__hei}" style="position:absolute;overflow:hidden;">
        <div  v-html="Label1__cap" v-if="Label1__vis" :disabled="Label1__dis" :style="{left:Label1__lef,top:Label1__top,width:Label1__wid,height:Label1__hei}" style="position:absolute;color:#323232;font-family:'Verdana';font-size:16pt;font-weight:normal;font-style:normal;text-decoration:none;line-height:53px;">{{Label1__cap}}
        </div>
        <el-image :src="Image1__src" fit="none" v-if="Image1__vis" :disabled="Image1__dis" :style="{left:Image1__lef,top:Image1__top,width:Image1__wid,height:Image1__hei}" style="position:absolute;">
        </el-Image>
        <div  v-html="Label2__cap" v-if="Label2__vis" :disabled="Label2__dis" :style="{left:Label2__lef,top:Label2__top,width:Label2__wid,height:Label2__hei}" style="position:absolute;color:#323232;font-family:'Verdana';font-size:16pt;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;line-height:53px;">{{Label2__cap}}
        </div>
        <el-main v-if="Panel_bottomline__vis" :disabled="Panel_bottomline__dis" :style="{backgroundColor:Panel_bottomline__col,left:Panel_bottomline__lef,top:Panel_bottomline__top,width:Panel_bottomline__wid,height:Panel_bottomline__hei}" style="position:absolute;overflow:hidden;">
        </el-main>
        </el-main>
	 </div>
    <script>
       Vue.prototype.dwsetcookie = function (c_name, value, expiredays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + expiredays);
            document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); 
       },
       Vue.prototype.dwgetcookie = function (name) {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
            if(arr=document.cookie.match(reg))
                 return unescape(arr[2]); 
            else
                 return '';
       },
	    Vue.prototype.procResp = function (data){
		    resp = JSON.parse(decodeURIComponent(String(data))); 
		    if (resp.mode === "update"){
		        eval(String(resp.code));
		    } else if (resp.mode === "showform"){
		        document.open();document.write(String(resp.code));
		    }
	    } 
        new Vue(
			{
				el: '#app',
				data: function () {
					return {
					    Form1_4__top:"0px",
					    Form1_4__wid:"480px",
					    Form1_4__hei:"556px",
                        Button1__lef:'99px',
                        Button1__top:'151px',
                        Button1__wid:'273px',
                        Button1__hei:'41px',
                        Button1__vis:true,
                        Button1__dis:false,
                        Button1__cap:'UPLOAD',
                        Button1__typ:'success',
                        BitBtn1__lef:"99px",
                        BitBtn1__top:"88px",
                        BitBtn1__wid:"273px",
                        BitBtn1__hei:"41px",
                        BitBtn1__vis:true,
                        BitBtn1__dis:false,
                        BitBtn1__cap:"File",
                        BitBtn1__typ:"primary",
                        BitBtn2__lef:"99px",
                        BitBtn2__top:"256px",
                        BitBtn2__wid:"273px",
                        BitBtn2__hei:"41px",
                        BitBtn2__vis:true,
                        BitBtn2__dis:false,
                        BitBtn2__cap:"Image",
                        BitBtn2__typ:"primary",
                        Button2__lef:'99px',
                        Button2__top:'319px',
                        Button2__wid:'273px',
                        Button2__hei:'41px',
                        Button2__vis:true,
                        Button2__dis:false,
                        Button2__cap:'UPLOAD',
                        Button2__typ:'success',
                        BitBtn3__lef:"99px",
                        BitBtn3__top:"424px",
                        BitBtn3__wid:"273px",
                        BitBtn3__hei:"41px",
                        BitBtn3__vis:true,
                        BitBtn3__dis:false,
                        BitBtn3__cap:"Video",
                        BitBtn3__typ:"primary",
                        Button3__lef:'99px',
                        Button3__top:'487px',
                        Button3__wid:'273px',
                        Button3__hei:'41px',
                        Button3__vis:true,
                        Button3__dis:false,
                        Button3__cap:'UPLOAD',
                        Button3__typ:'success',
                        Label1__lef:"161px",
                        Label1__top:"6px",
                        Label1__wid:"313px",
                        Label1__hei:"53px",
                        Label1__vis:true,
                        Label1__dis:false,
                        Label1__cap:"Upload",
                        Image1__lef:"6px",
                        Image1__top:"6px",
                        Image1__wid:"48px",
                        Image1__hei:"53px",
                        Image1__vis:true,
                        Image1__dis:false,
                        Image1__src:"/media/images/logo.png",
                        Label2__lef:"54px",
                        Label2__top:"6px",
                        Label2__wid:"107px",
                        Label2__hei:"53px",
                        Label2__vis:true,
                        Label2__dis:false,
                        Label2__cap:"DeWeb -",
                        Panel_bottomline__lef:"6px",
                        Panel_bottomline__top:"59px",
                        Panel_bottomline__wid:"468px",
                        Panel_bottomline__hei:"1px",
                        Panel_bottomline__vis:true,
                        Panel_bottomline__dis:false,
                        Panel_bottomline__col:"#F0F0F0",
                        Panel_01_Tile__lef:"0px",
                        Panel_01_Tile__top:"0px",
                        Panel_01_Tile__wid:"480px",
                        Panel_01_Tile__hei:"66px",
                        Panel_01_Tile__vis:true,
                        Panel_01_Tile__dis:false,
                        Panel_01_Tile__col:"#FFFFFF",
					    input_query_visible:false,
					    input_query_caption:"Input Query",
					    input_query_inputname:"new",
					    input_query_cancelcaption:"Cancel",
					    input_query_okcaption:"OK",
					    input_query_inputdefault:"",
					    input_query_method:"processinputquery",
					    input_query_visible:false,
					    version__istrial:false,
					    clientid:4853612,
					    shuntflag:9234
                    }
                },
                mounted() {
                    let me=this;
                    window.addEventListener(
                        "onorientationchange" in window ? "orientationchange" : "resize",
                        function() {
                            axios.get('{"mode":"event","cid":4853612,"component":"_screen","os":'+os()+',"orientation":"'+window.orientation+'","clientwidth":'+document.documentElement.clientWidth+',"clientheight":'+document.documentElement.clientHeight+',"innerwidth":'+window.innerWidth+',"innerheight":'+window.innerHeight+',"width":'+screen.width+',"height":'+screen.height+'}',{headers:{shuntflag:9234}})
                            .then(resp =>{me.procResp(resp.data)});
                        },
                        false
                    );
                    let Form1_4hearttimer = window.setInterval(function() {
                        axios.get('{"mode":"heart","cid":4853612}',{headers:{shuntflag:9234}})
                        .then(resp =>{me.procResp(resp.data)})
                        .catch((error) =>{me.dwnotify("Info","Network is disconnected!");clearInterval(Form1_4hearttimer);});
                    }, 590000);
                },
				methods: {
                    ToWebsite (e,n) {
                        var aTag = document.createElement('a'); 
                        aTag.setAttribute('href', e);
                        aTag.setAttribute('target', n);
                        aTag.click();
                    },
                    dwInputClick (e) {
                        document.getElementById(e).click();
                    },
                    dwInputChange (e) {
                        this[e+"__cap"] = document.getElementById(e+"__inp").files[0].name;
                        var sget = '{"mode":"event","cid":4853612,"component":"'+e+'","event":"getfilename","value":"'+escape(document.getElementById(e+"__inp").files[0].name)+'"}';
                        axios.get(sget)
                    },
                    filterHandler(value, row, column) {
                        const property = column['property'];
                        return row[property] === value;
                    },
                    dwInputSubmit (ipname) {
                        let me=this;let formData = new FormData();
                        formData.append('file', document.getElementById(ipname+"__inp").files[0]);
                        let config = {headers: {'Content-Type': 'multipart/form-data'}}
                        axios.post('/upload', formData, config)
                        .then(function (res) {
                            var sget = '{"mode":"event","cid":4853612,"component":"'+ipname+'","event":"onenddock","value":"success"}';
                            axios.get(sget)
                            .then(resp =>{me.procResp(resp.data)});
                        })
                    },
                    dwInputSubmit0 (ipname) {
                        document.getElementById(ipname+"__frm").submit();
                    },
                    dwnotify(caption,text) {this.$notify.warning({ title: caption, message: text, duration: 0,showClose: false });},
                    dwevent(val,compname,compvalue,compevent,reserved) {
                        var jo={};
                        jo.mode="event";
                        jo.cid=this.clientid;
                        jo.component=compname;
                        jo.value=escape(eval(compvalue))
                        jo.event=compevent;
                        axios.get(JSON.stringify(jo),{headers:{shuntflag:9234}})
                        .then(resp =>{this.procResp(resp.data)});
                    },
                    processinputquery(val) {
                        this.input_query_visible = false;
                        axios.get('{"mode":"interaction","cid":4853612,"class":"inputquery","method":"'+this.input_query_method+'","value":"'+this.input_query_inputdefault+'"}',{headers:{shuntflag:9234}})
                        .then(resp =>{this.procResp(resp.data)});
                    },
                },
                beforeDestroy() {
                    clearInterval(hearttimer);
                }
            }
        ); 
    </script>
</body>
</html>
